<script setup lang="ts">
import VirtualList from '@virtual-list/vue'
import type { ExcelColumnData } from '@/types/hmi/ExcelColumnConfig'
import { computed, ref } from 'vue'
import _ from 'lodash'

const props = withDefaults(defineProps<{
  protocolDataList: ExcelColumnData[]
}>(), { protocolDataList: () => [] })

const nameSearch = ref('')
const computedProtocolDataList = computed((): ExcelColumnData[] => {
  return props.protocolDataList.filter((item) => {
    return item?.name?.includes(nameSearch.value)
  })
})
</script>

<template>
  <div class="p-2 h-screen">
    <el-card style="height: 80vh;width: 20vw;">
      <template #header>
        <el-input v-model="nameSearch" />
      </template>
      <virtual-list class="mt-2" style="height: calc(80vh - 2 * var(--el-card-padding) - 2 * var(--el-card-padding) - 28px);"
                    :items="computedProtocolDataList" item-key="key">
        <template #default="{item}">
          <div class="p-2">
            <el-text truncated :title="item.key">{{ item.name }}</el-text>
          </div>
        </template>
      </virtual-list>
    </el-card>
  </div>
</template>

<style scoped>

</style>